<template>
    <fieldset>
        <legend>兄die</legend>
        <h1>{{ msg }}</h1>
        <ul>
            <!-- vue3 v-if和v-for同时使用的时候,可以把v-for迁移到template标签上 -->
            <template v-for="item of arr" :key="item.id">
                <li v-if="!item.isComplete">{{ item.todo }}</li>
            </template>
        </ul>
    </fieldset>
</template>

<script>
// import bus from "../../eventBus"
// vue2.x v-for优先级比v-if高
// vue3.0 v-if的优先级比v-for要更高
export default {
    data() {
        return {
            msg: "马杀鸡",
            arr: [
                {
                    id: 1,
                    todo: "吃饭",
                    isComplete: false
                }, {
                    id: 2,
                    todo: "睡觉",
                    isComplete: true
                }, {
                    id: 3,
                    todo: "打豆豆",
                    isComplete: false
                }]
        }
    },
    mounted() {
        console.log(this.$bus)
        this.$bus.$on("toBro", (input) => {
            console.log(input)
        })
    }
}
</script>